DOM Explorer

Dragging and dropping of a control inside another control takes place only if the control is a container element (for example, Group Control). The changes that are made in the DOM tree as a result of drag and drop will be reflected in the designer area. 

Uses:

• DOM Explorer displays the clear hierarchy of the controls in the designer area.
• Property sheet of the overlapped controls in the designer can be opened by clicking on the control in the DOM Explorer.
• Dragging and dropping of the controls inside another control can be done through the DOM Explorer.
• Elements that have free layout will follow the same DOM order irrespective of re-positioning. Hence, pressing the tab button will take the control to the element, which comes next in the DOM order and not to the element which comes next in the display. Therefore, to make it function properly, the DOM order of the elements must be changed as per the display and that can be done through drag and drop feature of the DOM Explorer.

Limitations:

• Elements dragged and dropped into a new parent will follow the old property (for example, position, label alignment) irrespective of its new parent.
• Functions that involve pixel calculation in Designer cannot be done through the DOM Explorer as the designer area will be hidden in the DOM Explorertab. The examples are as follows:
  • Splitter property sheet is disabled in the DOM Explorer as the options in the splitter property sheet involves pixel calculation.
  • Label width will not be updated.
• New elements will not be created through the DOM Explorer. When you drag and drop a button or an image, a new control box will be created and then it will be inserted in the Designer. This is not possible through the DOM Explorer.
• In the Form designer, when a UI is generated from a Web service or a schema fragment, the DOM Explorer does not display it the first time. The form must be closed and reopened to view such a UI in the DOM Explorer.

Related API :

• isDraggable - This function states whether a control can be dragged or not.
• canContain - This function checks whether the parent control can contain the dragged item (for example, when the input is dragged over group box, return true and when the input is dragged over the control box, return false).
• onBeforeInsertAction - This function checks whether the dragged item can be placed in the particular parent control and that can be used to perform any specific actions before the insertion (for example, when the button is dragged over the control box, it should return true and when the button is dragged over group box, it should return false). In future, when a button is dragged over the group box, a new control box should be created and then true should be returned.
• getComonIcon - Certain elements by default will not have icon (for example, tab group, element bar, splitter). For these elements, this function will return a common icon.
• getxfChild - Markup will be different for different controls. This function is used to get the required intentional child (for example, choice box). 
• isExpandable - This function states whether the control can be expanded to display its children. By default, composite controls and any other controls that does not inherit from the group control will not be expanded. In order to expand the control, this function should be overridden returning true.

Therefore, if a new control with different property or markup needs to be a part of this DOM tree, the above-mentioned APIs must be implemented in its library.